vue组件tabbar使用方法详解 |
您所在的位置：网站首页 › vue tabbar 页面切换 › vue组件tabbar使用方法详解 |
vue组件tabbar使用方法详解
|
vue组件tabbar使用方法详解
本文实例为大家分享了vue组件tabbar的具体使用方法，供大家参考，具体内容如下 1.App.vue 
首页
书影音
我的
// 引入 vux tabbar 组件
import { Tabbar, TabbarItem } from 'vux'
// 引入 vuex 的两个方法
import {mapGetters, mapActions} from 'vuex'
export default {
name: 'app',
components:{
Tabbar,
TabbarItem
},
data() {
return {
select:"Home"
}
},
// 计算属性
computed:mapGetters([
// 从 getters 中获取值
'tabbarShow'
]),
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
if(to.path == '/' || to.path == '/home' || to.path == '/audioBook' || to.path == '/mine'){
/**
* $store来自Store对象
* dispatch 向 actions 发起请求
*/
this.$store.dispatch('showTabBar');
}else{
this.$store.dispatch('hideTabBar');
}
}
},
methods: {
onIndexChange (newIndex, oldIndex) {
console.log(newIndex, oldIndex);
}
}
}
2.效果图
3.其他情况 {{i}} 
Wechat
Message
Explore
News
import { Tabbar, TabbarItem } from 'vux'
export default {
ready () {
document.querySelector('body').style.height = '100%'
document.querySelector('html').style.height = '100%'
document.querySelector('#app').style.height = '100%'
},
components: {
Tabbar,
TabbarItem
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。 |
【本文地址】
今日新闻 |
推荐新闻 |